@charset "utf-8";
@import "_reset";
@function r($px) {
    @return $px/100+rem;
}
.menu{
        position: fixed;
        bottom: r(67); 
        z-index: 5;
        padding: 0;
        font-size: 0;
        width: 100%;
        li{
            width: r(171);
            height: r(70);
            margin: 0 auto;
            list-style: none;
            a{
                img{
                    height: 100%;
                }
            }
        }
    }
.web{
    width: 100%;
    //首页
    .homepage{
        width: 100%; 
        background: url(../img/homebg.png);
        background-size: cover;
        position: relative;
        overflow: hidden;
        //logo
        .logo{
            font-size: 0;
            position: absolute;
            top:r(40);
            left: r(34);
            width:r(103) ;
            height: r(38);
            overflow: hidden;
            z-index: 5;
            img{
                height: 100%;
            }
        }
        //标题
        .biaoti{
            width: 100%;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: r(158);
            font-size: 0;
            .h1{
                width: r(381);
                height: r(71);
                overflow: hidden;
                img{
                    height: 100%;
                }
            }
            .h2{
                width: r(576);
                height: r(157);
                overflow: hidden;
                img{
                    height: 100%;
                }
            }
            .h3{
                width: r(352);
                height: r(62);
                overflow: hidden;
                img{
                    height: 100%;
                }
            }
            .h4{
                width: r(341);
                height: r(29);
                overflow: hidden;
                margin-top: r(10);
                img{
                    height: 100%;
                }
            }
        }
        //云透明
        .cloud1{
            width:r(112) ;
            height:r(83) ;
            overflow: hidden;
            font-size: 0;
            position: relative;
            left: r(-20);
            top: r(-100);
            animation-name: cloud_opcity;
            animation-duration: 10s;
            animation-iteration-count: infinite;
            opacity: 0.6;
            
            img{
                height: 100%;
            }
        }
         //云透明动画
        @keyframes cloud_opcity{
            0%{opacity: 0.8;}
            60%{opacity: 0;}
            100%{opacity: 0.8;}
        }
//      云2
        .cloud2{
            width:r(64) ;
            height:r(47) ;
            font-size: 0;
            overflow: hidden;
            position: absolute;
            right: 36px;
            top: r(431);
            img{
                height: 100%;
            }
           
        }
        //移动的云
        .cloud3{
            position: absolute;
            top: r(510);
            right: 0;
            animation-name: yundong;
            animation-duration: 30s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
            opacity: 0.6;
            transform: translateX(r(50));
            
        }
       //移动的云的动画
        @keyframes yundong{
            0%{opacity: 0.6; transform: translateX(r(50));}
            100%{opacity: 0;transform: translateX(r(-700));}

        }
        //月亮和月晕
        .moon_yun{
            font-size: 0;
            position: relative;
                top: r(-65);
            background: #fff;
            width: 100%;
            .moon{
                width: r(65);
                height: r(65);
                overflow: hidden;
                position: absolute;
                top: r(80);
                right: r(144);
                z-index: 5;
                img{
                    width: 100%;
                }
            }
            //月晕
            .moon_light{
                width: r(204);
                height: r(222);
                overflow: hidden;
                position: absolute;
                top: 50%;
                right: r(80);
                animation-name: mooblight;
                animation-duration: 5s;
                transform: scale(1);
                transform-origin: center;
                animation-iteration-count: infinite;
                img{
                    width: 100%;
                }
            }
            //月晕动画
            @keyframes mooblight{
                0%{transform: scale(1);}
                50%{transform: scale(0.7);}
                100%{transform: scale(1);}
            }
        }
        .hua{
            font-size: 0;
            //芈月专
                .minyue{
                    width: r(94);
                    height:r(69) ;
                    overflow: hidden;
                    position: absolute;
                    bottom: r(420);
                    left: r(48);
                    animation-name: minyue;
                    animation-delay: 7s;
                    animation-duration: 2s;
                    transform: scale(1);
                    animation-fill-mode: backwards;
                    img{
                        height: 100%;
                    }
                }
                //这是什贵
                .gui{
                    width: r(148);
                    height:r(82) ;
                    overflow: hidden;
                    position: absolute;
                    bottom: r(396);
                    right: r(45);
                    animation-name: gui;
                    animation-delay: 6s;
                    animation-duration: 2s;
                    transform: scale(1);
                    animation-fill-mode: backwards;
                    img{
                        height: 100%;
                    }
                }
                //主演看气质
                .qizhi{
                    width: r(128);
                    height:r(78) ;
                    overflow: hidden;
                    position: absolute;
                    bottom: r(158);
                    left: r(55);
                    animation-name: qizhi;
                    animation-delay: 8s;
                    animation-duration: 2s;
                    transform: scale(1);
                    animation-fill-mode: backwards;
                    img{
                        height: 100%;
                    }
                }
                //太子妃
                .fei{
                    width: r(94);
                    height:r(57) ;
                    overflow: hidden;
                    position: absolute;
                    bottom: r(194);
                    right: r(55);
                    animation-name: fei;
                    animation-delay: 9s;
                    animation-duration: 2s;
                    transform: scale(1);
                    animation-fill-mode: backwards;
                    img{
                        height: 100%;
                    }
                }
                //人物
                .ren{
                    width: r(339);
                    height:r(421) ;
                    overflow: hidden;
                    position: absolute;
                    bottom: r(146);
                    left: r(158);
                    z-index: 6;
                    animation-name: renwu;
                    transform: translateY(r(-990));
                    animation-delay: 1s;
                    animation-duration: 5s;
                    animation-fill-mode: forwards;
                    opacity: 0.3;
                    img{
                        width: 100%;
                    }
                }
            }
    }
    //问题页面
    .question{
            .fp-controlArrow{
                display: none;
            }
//问题页面通用样式
        .slide{
            background: url(../img/bg-question.jpg)no-repeat;
            background-size:cover ;
            font-size: 0;
            position: relative;
            
            .q1{
                margin: 0 auto;
                padding: 0;
                text-align: left;
                font-size:r(34);
                margin-top: r(105);
                font-weight: bold;
                color: #fff;
                width: r(527);
               
            }
            //答案选项
            .anser_select{
                position: absolute;
                left: r(58);
                top: r(683);
                .anser{
                    margin: 0;
                    padding: 0;
                    width: r(367);
                    height:r(63) ;
                    font-size: r(28);
                    line-height: r(63);
                    margin-bottom: r(28);
                    background: url(../img/xuanxiangbg.png)no-repeat;
                    background-size:cover;
                }
                .anser:hover{
                    background: url(../img/checkbg.png);
                    background-size:cover;
                    margin: 0;
                    padding: 0;
                    width: r(367);
                    height:r(63) ;
                    margin-bottom: r(28);
                }
                //正确答案
                .right:hover{
                    background: url(../img/right-bg.png);
                    background-size:cover;
                    margin: 0;
                    padding: 0;
                    width: r(367);
                    height:r(63) ;
                    margin-bottom: r(28);
                }
                
            }
            //小狗
            .img_dog{
                width:r(83);
                height: r(92);
                position: absolute;
                bottom: r(80);
                right: r(80);
                z-index: 5;
            }
            //云
            .cloud{
                img:nth-child(1){
                    width:r(112) ;
                    position: absolute;
                    top: r(480);
                    left: r(33);
                    opacity: 0;
                    animation-name: yun-1;
                    animation-fill-mode: both;
                    animation-duration: 10s;
                    animation-delay: 8s;
                     animation-iteration-count: infinite;
                }
                 img:nth-child(2){
                    width:r(64) ;
                    position: absolute;
                    top: r(489);
                    right: r(125);
                    animation-name: yun-2;
                    animation-fill-mode: both;
                    animation-duration: 30s;
                    animation-delay: 8s;
                     animation-iteration-count: infinite;
                   
                }
                img:nth-child(3){
                    height: r(82);
                    position: absolute;
                    top: r(443);
                    left: r(563);
                    opacity: 0.4;
                    animation-name: yun-3;
                    animation-fill-mode: both;
                    animation-duration: 40s;
                    animation-delay: 1s;
                     animation-iteration-count: infinite;
                }
            }
            //灵动的音符
            .yinfu{
                img{
                    position: absolute;
                    bottom: r(130);
                    right: r(90);
                }
                img:nth-child(1){
                    width:r(69) ;
                    height: r(47);
                    opacity: 1;
                    animation-name: yinfu1;
                    animation-duration: 6s;
                    animation-fill-mode: both;
                    animation-iteration-count: infinite;
                    animation-timing-function:cubic-bezier(.36,1.17,.46,.98);
                }
                img:nth-child(2){
                    width:r(65) ;
                    height: r(61);
                    opacity: 1;
                    animation-name: yinfu2;
                    animation-duration: 6s;
                    animation-fill-mode: both;
                    animation-iteration-count: infinite;
                    animation-delay: 1s;
                    animation-timing-function:cubic-bezier(.36,1.17,.46,.98);
                }
                img:nth-child(3){
                    width:r(75) ;
                    height: r(53);
                    opacity: 1;
                    animation-name: yinfu3;
                    animation-duration: 6s;
                    animation-fill-mode: both;
                    animation-iteration-count: infinite;
                    animation-delay: 2s;
                    animation-timing-function:cubic-bezier(.36,1.17,.46,.98);
                }
                img:nth-child(4){
                    width:r(74) ;
                    height: r(74);
                    opacity: 1;
                    animation-name: yinfu4;
                    animation-duration: 6s;
                    animation-fill-mode: both;
                    animation-iteration-count: infinite;
                    animation-delay: 3s;
                    animation-timing-function:cubic-bezier(.36,1.17,.46,.98);
                }
                img:nth-child(5){
                    width:r(104) ;
                    height: r(122);
                    position: absolute;
                    bottom: r(70);
                    right: r(80);
                    opacity: 1;
                    animation-name: yinfu5;
                    animation-duration: 6s;
                    animation-fill-mode: both;
                    animation-iteration-count: infinite;
                    animation-delay: 4s;
                    animation-timing-function:cubic-bezier(.36,1.17,.46,.98);
                }
            }
            
        }
        .question1{
            position: relative;
            .img_question{
                width: r(250);
                height: r(350);
                position: absolute;
                top: r(180);
                left: r(202);
                z-index: 5;
                
            }
            
        }
         .question2{
            position: relative;
            .img_question{
                width: r(212);
                height: r(234);
                position: absolute;
                top: r(275);
                left: 30%;
                z-index: 5;
                
            }
            
        }
        .question3{
            position: relative;
            .img_question{
                width: r(334);
                height: r(256);
                position: absolute;
                top: r(266);
                left: r(140);
                z-index: 5;
                
            }
            
        }
         .question4{
            position: relative;
            .img_question{
                width: r(241);
                height: r(125);
                position: absolute;
                top: r(326);
                left: r(212);
                z-index: 5;
                
            }
            
        }
           .question5{
            position: relative;
            .img_question{
                width: r(353);
                height: r(195);
                position: absolute;
                top: r(269);
                left: r(145);
                z-index: 5;
                
            }
            
        }
         .question6{
            position: relative;
            .img_question{
                width: r(345);
                height: r(193);
                position: absolute;
                top: r(250);
                left: r(153);
                z-index: 5;
                
            }
            
        }
        .question7{
            position: relative;
            .img_question{
                width: r(358);
                height: r(244);
                position: absolute;
                left: r(171);
                top: r(251);
                z-index: 5;
                
            }
            
        }
        .question8{
            position: relative;
            .img_question{
                width: r(250);
                height: r(350);
                position: absolute;
                left: r(202);
                top: r(180);
                z-index: 5;
                
            }
            
        }
        .question9,.question10,.question11,.question13{
            position: relative;
            .img_question{
                width: r(250);
                height: r(350);
                position: absolute;
                left: r(202);
                top: r(180);
                z-index: 5;
                
            }
            
        }
        .question10{
            position: relative;
            .img_question{
                width: r(250);
                height: r(350);
                position: absolute;
                left: r(202);
                top: r(210);
                z-index: 5;
                
            }
            
        }
        .question12{
            position: relative;
            .img_question{
                width: r(318);
                height: r(243);
                position: absolute;
                left: r(149);
                top: r(226);
                z-index: 5;
                
            }
            
        }
        .question14{
            position: relative;
            .img_question{
                width: r(251);
                height: r(352);
                position: absolute;
                left: r(201);
                top: r(287);
                z-index: 5;
                
            }
            
        }
        .question15{
            position: relative;
            .img_question{
                width: r(291);
                height: r(291);
                position: absolute;
                left: r(181);
                top: r(188);
                z-index: 5;
                
            }
            
        }
        .question16{
            position: relative;
            .img_question{
                width: r(329);
                height: r(321);
                position: absolute;
                left: r(149);
                top: r(205);
                z-index: 5;
                
            }
            
        }
        .question17{
            position: relative;
            .img_question{
                width: r(350);
                height: r(250);
                position: absolute;
                left: r(152);
                top: r(231);
                z-index: 5;
                
            }
            
        }
         .question18{
            position: relative;
            .img_question{
                width: r(263);
                height: r(379);
                position: absolute;
                left: r(189);
                top: r(218);
                z-index: 5;
                
            }
            
        }
        .question19{
            position: relative;
            .img_question{
                width: r(226);
                height: r(274);
                position: absolute;
                left: r(201);
                top: r(229);
                z-index: 5;
                
            }
            
        }
        .question20{
            position: relative;
            .img_question{
                width: r(250);
                height: r(350);
                position: absolute;
                left: r(202);
                top: r(185);
                z-index: 5;
                
            }
            
        }
        .question21{
            position: relative;
            .img_question{
                width: r(288);
                height: r(367);
                position: absolute;
                left: r(177);
                top: r(184);
                z-index: 5;
                
            }
            
        }
        .question22{
            position: relative;
            .img_question1{
                width: r(182);
                height: r(152);
                position: absolute;
                left: r(138);
                top: r(235);
                z-index: 5;
                
            }
            .img_question2{
                width: r(182);
                height: r(152);
                position: absolute;
                right: r(126);
                top: r(235);
                z-index: 5;
                
            }
            .img_question3{
                width: r(182);
                height: r(152);
                position: absolute;
                left: r(138);
                top: r(397);
                z-index: 5;
                
            }
            .img_question4{
                width: r(182);
                height: r(152);
                position: absolute;
                right: r(126);
                top: r(397);
                z-index: 5;
                
            }
            
        }
         .testresult{
            position: relative;
            .logo{
                font-size: 0;
                position: absolute;
                top:r(40);
                left: r(34);
                width:r(103) ;
                height: r(38);
                z-index: 5;
                
            }
            .result{
                width: r(534);
                height: r(846);
                background: url(../img/testresult_bg.png)no-repeat;
                background-size: cover;
                position: absolute;
                top: r(151);
                left:r(56);
                z-index: 5;
                text-align: center;
                h2{
                    font-size: r(52);
                    height: r(80);
                    color: #f6ff00;
                   text-shadow: #000;
                }
                p{
                    text-align: center;
                    width:r(400);
                    font-size: r(39);
                    margin: 0 auto;  
                    color: #fff;
                    span{
                        color:#42e241 ;
                    }
                }
                
            }
            .tst2{
                width: r(260);
                height: r(333);
                position: absolute;
                left:r(101) ;
                bottom:r(57) ;
                z-index: 6;
            }
            a{
                position: absolute;
                right: r(114);
                bottom:r(220) ;
                z-index: 6;
                img{
                    width: r(200);
                    height: r(71);
                }
            }
            
        }
        .pingjia,.friend{
            position: relative;
            .logo{
                font-size: 0;
                position: absolute;
                top:r(40);
                left: r(34);
                width:r(103) ;
                height: r(38);
                z-index: 5;
                
            }
            .img11{
                width: r(173);
                height: (173);
                position: absolute;
                left:r(243) ;
                top: r(118);
            }
            .pp1{
                font-size: r(27);
                color: #fff;
                background: #75b9ff;
                width: r(397);
                height: r(44);
                line-height:r(44) ;
                border-radius: r(7);
                padding-left:r(15) ;
                position: absolute;
                top:r(331) ;
                left:r(137) ;
            }
            .pp2{
                font-size: r(27);
                color: #fff;
                position: absolute;
                top:r(392) ;
                left:r(181) ;
            }
            ul{
                position: absolute;
                left:r(157) ;
                top: r(445);
                li{
                    width: r(402);
                    height: r(44);
                    border-radius: r(7);
                    background:#f346f3;
                    margin-bottom: r(52);
                    font-size: r(26);
                    line-height:r(44) ;
                    color: #fff;
                    padding-left:r(15) ;
                }
            }
            .img12{
                width:r(59) ;
            }
            .img101{
                position: absolute;
                left:r(89) ;
                top: r(437);
            }
            .img102{
                position: absolute;
                left:r(89) ;
                top: r(532);
            }
            .img103{
                position: absolute;
                left:r(89) ;
                top: r(627);
            }
            .yinxiang{
                width: 100%;
                height: r(70);
                background:#2c2c2c ;
                position: absolute;
                bottom: 0;
                p{
                    font-size: r(24);
                    color: #fff;
                    position: absolute;
                    bottom: r(25);
                    left: r(23);
                }
                a{
                    display: block;
                    width: r(111);
                    height: r(47);
                    border-radius: r(7);
                    background: #deff00;
                    font-size: r(23);
                    color: #000;
                    text-align: center;
                    line-height: r(47);
                    position: absolute;
                    right: r(66);
                    bottom: r(13);
                    z-index: 6;
                }
                .img111{
                    width: r(36);
                    height: r(28);
                    position: absolute;
                    right: r(19);
                    bottom: r(22);
                    z-index: 6;
                }
            }
            .zhezhao{
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.5);
                position: absolute;
                top: 0;
                z-index: 7;
                
                img{
                    width:r(314) ;
                    position: absolute;
                    left:r(163) ;
                    top: r(365);
                }
            }
            .zhezhao:hover{
                position: absolute;
//              top: -100%;
                animation-name: zhezhao;
                animation-delay: 1s;
                animation-duration: 3s;
                animation-fill-mode: forwards;
                
            }
        }
        .friend{
            position: relative;
            img:nth-child(2){
                width: r(476);
                position: absolute;
                top:r(303) ;
                left:r(81) ;
            }
            img:nth-child(3){
                width: r(308);
                position: absolute;
                top:r(480) ;
                left:r(40) ;
            }
            img:nth-child(4){
                width: r(308);
                position: absolute;
                top:r(480) ;
                left:r(40) ;
            }
             img:nth-child(5){
                width: r(167);
                position: absolute;
                top:r(537) ;
                right:r(84) ;
            }
            img:nth-child(6){
                width: r(134);
                position: absolute;
                top:r(605) ;
                left:r(83) ;
            }
            img:nth-child(7){
                width: r(178);
                position: absolute;
                bottom:r(447) ;
                left:r(222) ;
            }
            img:nth-child(8){
                width: r(190);
                position: absolute;
                bottom:r(397) ;
                right:r(61) ;
            }
            img:nth-child(9){
                width: r(479);
                position: absolute;
                bottom:r(311) ;
                right:r(73) ;
            }
            a{
                display: block;
            }
              .a1{
                width: r(142);
                position: absolute;
                left: r(151);
                bottom: r(149);
                img{
                   width: 100%; 
                }
                
            }
             .a2{
                 width: r(138);
                 position: absolute;
                 right: r(159);
                 bottom: r(149);
                img{
                    width: 100%;
                }
                
            }
            input{
                width:r(495) ;
                height:r(71) ;
                border:2px solid #FFF ;
                border-radius: r(7);
                background: rgba(0,0,0,0);
                position: absolute;
                left: r(68);
                bottom: r(218);
            }
            .zhezhao{
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.7);
                position: absolute;
                top: 0;
                z-index: 7;
            }
            .zhezhao:hover{
                position: absolute;
                animation-name: zhezhao;
                animation-delay: 1s;
                animation-duration: 3s;
                animation-fill-mode: forwards;
                
            }
       
        }
        
    } 
}
@keyframes renwu{
    0%{transform: translateY(r(-990));opacity:0.3;}
    60%{transform: translateY(r(0));opacity:1;}
    70%{transform: translateY(r(20));opacity:1;}
    80%{transform: translateY(r(0));opacity:1;}
    90%{transform: translateY(r(20));opacity:1;}
    100%{transform: translateY(r(0));opacity:1;}
}
@keyframes gui{
    0%{transform: scale(1);}
    50%{transform: scale(1.8);}
    100%{transform: scale(1);}
}
@keyframes minyue{
    0%{transform: scale(1);}
    50%{transform: scale(1.8);}
    100%{transform: scale(1);}
}
@keyframes qizhi{
    0%{transform: scale(1);}
    50%{transform: scale(1.8);}
    100%{transform: scale(1);}
}
@keyframes fei{
    0%{transform: scale(1);}
    50%{transform: scale(1.8);}
    100%{transform: scale(1);}
}
//问题页面云的动画
@keyframes yun-1{
    0%{left: r(33);opacity: 0;}
    50%{left:r(33);opacity: 1;}
    100%{left:r(-50);opacity: 0;}
}
@keyframes yun-2{
    from{right: r(125);}
    to{right: r(640);}
}
@keyframes yun-3{
    from{left: r(563);}
    to{left: r(-70);}
}
//问题页面音符的动画
@keyframes yinfu1{
    from{bottom: r(130);opacity: 1;}
    to{bottom: r(450);opacity: 0;}
}
@keyframes yinfu2{
    from{bottom: r(130);opacity: 1;}
    to{bottom: r(450);opacity: 0;}
}
@keyframes yinfu3{
    from{bottom: r(130);opacity: 1;}
    to{bottom: r(450);opacity: 0;}
}
@keyframes yinfu4{
    from{bottom: r(130);opacity: 1;}
    to{bottom: r(450);opacity: 0;}
}
@keyframes yinfu5{
    from{bottom: r(70);opacity: 1;}
    to{bottom: r(450);opacity: 0;}
}
@keyframes zhezhao{
    from{top:r(0)}
    to{top:-100%}
}
